<script setup>
import { ref } from 'vue'

const operationStats = ref({
  totalPassengers: 1580000,
  revenue: 326000,
  operatingLines: 5,
  activeTrains: 48,
  avgWaitTime: 3.5,
  satisfaction: 92
})

const lineStats = ref([
  {
    id: 1,
    name: '1号线',
    color: '#E6002D',
    data: {
      passengers: 420000,
      trains: 12,
      stations: 15,
      peakLoad: 85,
      satisfaction: 94,
      revenue: 86000
    },
    hourlyData: [
      { hour: '06:00', passengers: 15000 },
      { hour: '07:00', passengers: 42000 },
      { hour: '08:00', passengers: 68000 },
      { hour: '09:00', passengers: 45000 },
      { hour: '10:00', passengers: 28000 }
      // ... 更多小时数据
    ]
  },
  {
    id: 2,
    name: '2号线',
    color: '#009BC9',
    data: {
      passengers: 380000,
      trains: 10,
      stations: 13,
      peakLoad: 78,
      satisfaction: 91,
      revenue: 72000
    },
    hourlyData: [
      { hour: '06:00', passengers: 12000 },
      { hour: '07:00', passengers: 38000 },
      { hour: '08:00', passengers: 58000 },
      { hour: '09:00', passengers: 40000 },
      { hour: '10:00', passengers: 25000 }
    ]
  }
])

const timeRange = ref('today')
const selectedLine = ref(lineStats.value[0])
</script>

<template>
  <div class="stats-container">
    <div class="main-content">
      <div class="overview-section">
        <div class="section-header">
          <h2>运营概览</h2>
          <div class="time-filter">
            <button 
              v-for="range in ['today', 'week', 'month']" 
              :key="range"
              :class="['time-btn', { active: timeRange === range }]"
              @click="timeRange = range"
            >
              {{ range === 'today' ? '今日' : range === 'week' ? '本周' : '本月' }}
            </button>
          </div>
        </div>

        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon">👥</div>
            <div class="stat-content">
              <span class="stat-value">{{ operationStats.totalPassengers.toLocaleString() }}</span>
              <span class="stat-label">总客流量</span>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
              <span class="stat-value">¥{{ operationStats.revenue.toLocaleString() }}</span>
              <span class="stat-label">营收</span>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">🚊</div>
            <div class="stat-content">
              <span class="stat-value">{{ operationStats.activeTrains }}</span>
              <span class="stat-label">运营列车</span>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">⏱️</div>
            <div class="stat-content">
              <span class="stat-value">{{ operationStats.avgWaitTime }}分钟</span>
              <span class="stat-label">平均等待时间</span>
            </div>
          </div>
        </div>
      </div>

      <div class="line-stats-section">
        <div class="section-header">
          <h2>线路数据</h2>
          <div class="line-selector">
            <button 
              v-for="line in lineStats"
              :key="line.id"
              :class="['line-btn', { active: selectedLine.id === line.id }]"
              :style="{ '--line-color': line.color }"
              @click="selectedLine = line"
            >
              {{ line.name }}
            </button>
          </div>
        </div>

        <div class="line-details">
          <div class="line-metrics">
            <div class="metric-item">
              <span class="metric-label">日均客流</span>
              <span class="metric-value">{{ selectedLine.data.passengers.toLocaleString() }}</span>
            </div>
            <div class="metric-item">
              <span class="metric-label">运营列车</span>
              <span class="metric-value">{{ selectedLine.data.trains }}列</span>
            </div>
            <div class="metric-item">
              <span class="metric-label">高峰负载</span>
              <span class="metric-value">{{ selectedLine.data.peakLoad }}%</span>
            </div>
            <div class="metric-item">
              <span class="metric-label">满意度</span>
              <span class="metric-value">{{ selectedLine.data.satisfaction }}%</span>
            </div>
          </div>

          <div class="line-chart">
            <!-- 这里可以使用echarts等图表库展示客流量变化 -->
            <div class="chart-placeholder">
              <div 
                v-for="data in selectedLine.hourlyData" 
                :key="data.hour"
                class="bar"
                :style="{ height: `${data.passengers / 1000}px` }"
              >
                <span class="bar-value">{{ (data.passengers / 1000).toFixed(1) }}k</span>
              </div>
            </div>
            <div class="chart-labels">
              <span 
                v-for="data in selectedLine.hourlyData" 
                :key="data.hour"
                class="time-label"
              >
                {{ data.hour }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="side-panel">
      <div class="alerts-section">
        <h3>运营提醒</h3>
        <div class="alerts-list">
          <div class="alert-item warning">
            <span class="alert-icon">⚠️</span>
            <div class="alert-content">
              <p class="alert-title">1号线高峰期客流量较大</p>
              <p class="alert-desc">建议增加运力投放</p>
            </div>
          </div>
          <div class="alert-item info">
            <span class="alert-icon">ℹ️</span>
            <div class="alert-content">
              <p class="alert-title">2号线例行维护</p>
              <p class="alert-desc">预计22:00开始</p>
            </div>
          </div>
        </div>
      </div>

      <div class="performance-section">
        <h3>性能指标</h3>
        <div class="performance-metrics">
          <div class="performance-item">
            <div class="metric-header">
              <span>准点率</span>
              <span class="metric-value">98.5%</span>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 98.5%"></div>
            </div>
          </div>
          <div class="performance-item">
            <div class="metric-header">
              <span>设备完好率</span>
              <span class="metric-value">99.2%</span>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 99.2%"></div>
            </div>
          </div>
          <div class="performance-item">
            <div class="metric-header">
              <span>系统稳定性</span>
              <span class="metric-value">97.8%</span>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 97.8%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.stats-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  min-height: calc(100vh - 72px);
  padding: 20px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.overview-section,
.line-stats-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 24px;
  color: #0f172a;
}

.time-filter {
  display: flex;
  gap: 12px;
}

.time-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s;
}

.time-btn.active {
  background: #0f172a;
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 32px;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #0f172a;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
}

.line-selector {
  display: flex;
  gap: 12px;
}

.line-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  background: #f1f5f9;
  color: var(--line-color);
  cursor: pointer;
  transition: all 0.3s;
}

.line-btn.active {
  background: var(--line-color);
  color: white;
}

.line-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.line-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.metric-item {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-label {
  font-size: 14px;
  color: #64748b;
}

.metric-value {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
}

.line-chart {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  height: 300px;
}

.chart-placeholder {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 20px;
}

.bar {
  flex: 1;
  background: var(--line-color, #0f172a);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.3s;
  min-height: 4px;
}

.bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #64748b;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  margin-top: 8px;
}

.time-label {
  font-size: 12px;
  color: #64748b;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.alerts-section,
.performance-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.alerts-section h3,
.performance-section h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 16px;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
}

.alert-item.warning {
  background: #fff7ed;
}

.alert-item.info {
  background: #f0f9ff;
}

.alert-icon {
  font-size: 20px;
}

.alert-title {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 4px;
}

.alert-desc {
  font-size: 12px;
  color: #64748b;
}

.performance-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.performance-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 14px;
}

.progress-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #0f172a;
  border-radius: 4px;
  transition: width 0.3s;
}

@media (min-width: 1920px) {
  .stats-container {
    grid-template-columns: 1fr 400px;
  }
}
</style> 